<template>
	<view class="loginPage">
		<image src="@/static/image/登录背景@2x.png" mode="widthFix"></image>
		<view class="loginForm">
			<view class="title">
				虚拟店长用户登录
			</view>
			<view class="row-input">
				<image src="../../../static/image/手机号@2x.png" mode="widthFix"></image>
				<input placeholder="请输入手机号" v-model="mobileShip" maxlength="11" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/验证码@2x.png" mode="widthFix"></image>
				<input placeholder="请输入验证码" v-model="codeShip" maxlength="8" />
				<view class="yzminner" @click="sendCodeShip" v-if="!verificationTimeShip">
					获取验证码
				</view>
				<view class="yzminner" v-if="verificationTimeShip">
					重新获取{{verificationTimeShip}}s
				</view>
			</view>

			<view class="loginBtn" @click="loginShip">登录</view>
			<view class=" info">
				请使用会员店长会员号码登录
			</view>
			<view class="rule">
				<uni-data-checkbox multiple v-model="checkbox" :localdata="hobby">《虚拟店长服务协议》</uni-data-checkbox>
				<text class="ruleInfo" @click="goRuleFun">《虚拟店长服务协议》</text>
			</view>



		</view>
	</view>
</template>

<script setup>
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	onLoad(() => {

	})

	onShow(() => {

	})
	const mobileShip = ref(null)
	const codeShip = ref(null)
	const verificationTimeShip = ref('')
	const timer = ref('')
	const msgOrderNo = ref('')
	const styles = ref({
		color: '#a1a1a1',
		borderColor: '#fff',
		backgroundColor: '#f6f7fb',
		height: '40px'

	})
	const checkbox = ref(-1)
	const checkbox1 = ref([0])
	const hobby = ref([{
		text: '已阅读并同意',
		value: 0
	}])
	// const hobby = ref([{
	// 	text: '',
	// 	value: 0
	// }])

	const navTo = path => {
		proxy.sjuNav.navigateTo(path)
	}
	const sendCodeShip = () => {
		console.log(mobileShip.value)

		let myreg = /^[1]\d{10}$/;
		if (!myreg.test(mobileShip.value)) {
			// this.$utils.msg("请输入移动手机号");
			proxy.sjuAlert.showInfo('请输入移动手机号', 2000)
		} else {
			verificationTimeShip.value = 60
			verificationDownShip()
			proxy.sjuRequest.request("/api/weixin/sendCode/" + proxy.sjuConfig.appInfo.appId, 'post', {
				"mobile": mobileShip.value
			}).then(res => {
				console.log(res)
				if (res.code == "0000") {
					msgOrderNo.value = res.msgOrderNo;
				} else {
					proxy.sjuAlert.showError("验证码发送失败");
				}
			})
		}
	}
	const loginShip = () => {
		 proxy.sjuLogin.saveValue("xndzOpenid", 'oNbHa6ELXn46a5Ykt0okTgzNV5DA');
		if(checkbox.value==-1){
			proxy.sjuAlert.showError("请阅读并同意会员协议");
			return false;
		}
		if (proxy.sjuBase.isNull(mobileShip) || proxy.sjuBase.isNull(codeShip)) {
			proxy.sjuAlert.showError("手机号或验证码不能为空");
		} else {
			proxy.sjuRequest.request("/api/weixin/loginUser/" + proxy.sjuConfig.appInfo.appId, 'post', {
				"mobile": mobileShip.value,
				"sendCode": codeShip.value,
				"openId": proxy.sjuLogin.getValue("xndzOpenid"),
				"msgOrderNo": msgOrderNo.value
			}).then(res => {
				console.log(res)
				if (res.code == "200") {
					console.log(mobileShip.value)
					proxy.sjuAlert.showInfo("登录成功");
					proxy.sjuLogin.saveValue("xndz_mobileShip", mobileShip.value);
					proxy.sjuNav.navigateTo('/tab/my')
				} else if (res.code == "0001") {
					proxy.sjuAlert.showError(res.msg);
				} else {
					proxy.sjuAlert.showError("验证码错误");
				}
			})
		}

	}

	const verificationDownShip = () => {
		console.log(123)
		// 设置定时器
		timer.value = setInterval(() => {
			verificationTimeShip.value = verificationTimeShip.value - 1
			if (verificationTimeShip.value < 10) verificationTimeShip.value = '0' + verificationTime.value
			if (verificationTimeShip.value <= 0) {
				// 清除定时器
				clearInterval(timer.value)
				verificationTimeShip.value = ''
			}
		}, 1000)
	}
	const goRuleFun = path => {
		proxy.sjuNav.navigateTo('/my/agreement')
	}
</script>

<style lang="scss" scoped>
	.loginPage {
		width: 100%;
		height: 100%;

		image {
			width: 100%
		}

	}

	.logo {
		width: 100%;
		height: auto;
		position: relative;

		image {
			width: 100%;
		}

		.info {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			text {
				display: block;
				font-size: 36rpx;
				color: #fff;
				// font-weight: bold;
				line-height: 1.8;
			}
		}
	}

	.loginForm {
		width: 94%;
		height: 340px;
		background: #fff;
		padding: 20rpx 60rpx;
		box-sizing: border-box;

		border-radius: 20px;
		position: absolute;
		top: 50%;
		left: 3%;
		transform: translateY(-30%);

		.title {
			font-size: 15px;
			font-weight: bold;
			line-height: 50px;
			color: #616161;
		}

		.row-input {
			margin: 30rpx 0rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 20rpx;
			height: 90rpx;
			border: none;
			border-radius: 40rpx;
			background-color: #f6f7fb;

			image {

				width: 40rpx;

				flex-shrink: 0;
			}

			.iconfont {
				// color: #d9d8dd;
				padding: 0rpx 10rpx 0rpx 10rpx;
				flex-shrink: 0;
				font-size: 40rpx;
			}

			input {
				flex: 1;
				font-size: 30rpx;
				padding: 0rpx 40rpx;
				// color: #d9d8dd;
				// border-left: 3rpx solid var(--primary-color);
			}

			.code {
				display: flex;
				justify-content: flex-end;
				letter-spacing: 2rpx;
				width: 200rpx;
				color: #46aefd;
			}

			.forhidden {
				color: #CCCCCC;
			}

			.yzminner {
				padding: 0 5px;
				color: #0091ff;
				// background: ;
			}
		}


		// .row-input {

		// 	display: flex;
		// 	justify-content: flex-start;
		// 	align-items: center;
		// 	padding: 5px 0;

		// 	image {
		// 		padding: 0rpx 10rpx 0rpx 10rpx;
		// 		width: 50rpx;
		// 		height: 50rpx;
		// 		flex-shrink: 0;
		// 	}

		// 	.yzminner {
		// 		padding: 0 5px;
		// 		color: #0091ff;
		// 		// background: ;
		// 	}

		// 	.iconfont {
		// 		color: #727272;
		// 		padding: 0rpx 10rpx 0rpx 10rpx;
		// 		flex-shrink: 0;
		// 		font-size: 40rpx;
		// 	}

		// 	::v-deep.uniui-phone:before {
		// 		font-size: 20px !important;
		// 	}

		// 	::v-deep.uniui-locked:before {
		// 		font-size: 20px !important;
		// 	}

		// 	::v-deep.uni-easyinput__content {
		// 		height: 40px;
		// 		border-radius: 20px;
		// 	}
		// }

		.loginBtn {

			margin: 10px auto;
			margin-top: 10rpx;
			font-size: 35rpx;
			width: 100%;
			border-radius: 50px;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
			background-image: linear-gradient(to right, #1b196f, #0b0a34);
		}

		.info {
			text-align: center;
			line-height: 50px;
		}

		.menuLink {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: var(--btn-bg-color);
			letter-spacing: 3rpx;
			line-height: 80rpx;
		}
	}

	.rule {
		// display: flex;
		// flex-direction: row;
		// margin-right: auto;
		position: relative;

		.ruleInfo {
			position: absolute;
			top: 3px;
			left: 200rpx
		}
	}
</style>